<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="btn_pre">上一张</button>
		<button type="button" id="btn_next">下一张</button>
		<ul style="list-style: none;">
			<li><img src="../img/1.webp" width="300" /></li>
			<li><img src="../img/2.webp" width="300" /></li>
			<li><img src="../img/3.webp" width="300" /></li>
		</ul>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				let i = 0;
				$("ul>li").hide();
				$(`ul>li:eq(${i})`).show();

				//点击事件
				$("#btn_pre").click(function() {
					i--;
					if (i < 0) {
						i = $("ul>li").length - 1;
					}
					$("ul>li").hide();
					$(`ul>li:eq(${i})`).show();
				});
				$("#btn_next").click(function() {
					i++;
					if (i === $("ul>li").length) {
						i = 0;
					}
					$("ul>li").hide();
					$(`ul>li:eq(${i})`).show();
				});
			});
		</script>
	</body>
</html>
